import { defineComponent, computed, unref } from 'vue';
import { BasicDrawer } from '/@/components/Drawer/index';
import { Divider } from 'ant-design-vue';
import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, InputNumberItem } from './components';
import { AppDarkModeToggle } from '/@/components/Application';
import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { baseHandler } from './handler';
import { HandlerEnum, contentModeOptions, topMenuAlignOptions, getMenuTriggerOptions, routerTransitionOptions, menuTypeList, tabsThemeOptions, } from './enum';
import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST, APP_PRESET_COLOR_LIST } from '/@/settings/designSetting';
const { t } = useI18n();
export default defineComponent({
    name: 'SettingDrawer',
    setup(_, { attrs }) {
        const { getContentMode, getShowFooter, getShowBreadCrumb, getShowBreadCrumbIcon, getShowLogo, getFullContent, getColorWeak, getGrayMode, getLockTime, getShowDarkModeToggle, getThemeColor, } = useRootSetting();
        const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } = useTransitionSetting();
        const { getIsHorizontal, getShowMenu, getMenuType, getTrigger, getCollapsedShowTitle, getMenuFixed, getCollapsed, getCanDrag, getTopMenuAlign, getAccordion, getMenuWidth, getMenuBgColor, getIsTopMenu, getSplit, getIsMixSidebar, getCloseMixSidebarOnChange, getMixSideTrigger, getMixSideFixed, } = useMenuSetting();
        const { getShowHeader, getFixed: getHeaderFixed, getHeaderBgColor, getShowSearch } = useHeaderSetting();
        const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold, getTabsTheme } = useMultipleTabSetting();
        const getShowMenuRef = computed(() => {
            return unref(getShowMenu) && !unref(getIsHorizontal);
        });
        function renderSidebar() {
            return (<>
          <TypePicker menuTypeList={menuTypeList} handler={(item) => {
                    baseHandler(HandlerEnum.CHANGE_LAYOUT, {
                        mode: item.mode,
                        type: item.type,
                        split: unref(getIsHorizontal) ? false : undefined,
                    });
                }} def={unref(getMenuType)}/>
        </>);
        }
        function renderHeaderTheme() {
            return <ThemeColorPicker colorList={HEADER_PRESET_BG_COLOR_LIST} def={unref(getHeaderBgColor)} event={HandlerEnum.HEADER_THEME}/>;
        }
        function renderSiderTheme() {
            return <ThemeColorPicker colorList={SIDE_BAR_BG_COLOR_LIST} def={unref(getMenuBgColor)} event={HandlerEnum.MENU_THEME}/>;
        }
        function renderMainTheme() {
            return <ThemeColorPicker colorList={APP_PRESET_COLOR_LIST} def={unref(getThemeColor)} event={HandlerEnum.CHANGE_THEME_COLOR}/>;
        }
        /**
         * @description:
         */
        function renderFeatures() {
            let triggerDef = unref(getTrigger);
            const triggerOptions = getMenuTriggerOptions(unref(getSplit));
            const some = triggerOptions.some((item) => item.value === triggerDef);
            if (!some) {
                triggerDef = TriggerEnum.FOOTER;
            }
            return (<>
          <SwitchItem title={t('layout.setting.splitMenu')} event={HandlerEnum.MENU_SPLIT} def={unref(getSplit)} disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}/>
          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.mixSidebarFixed')}*/}
          {/*  event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}*/}
          {/*  def={unref(getMixSideFixed)}*/}
          {/*  disabled={!unref(getIsMixSidebar)}*/}
          {/*/>*/}

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.closeMixSidebarOnChange')}*/}
          {/*  event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}*/}
          {/*  def={unref(getCloseMixSidebarOnChange)}*/}
          {/*  disabled={!unref(getIsMixSidebar)}*/}
          {/*/>*/}
          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.menuCollapse')}*/}
          {/*  event={HandlerEnum.MENU_COLLAPSED}*/}
          {/*  def={unref(getCollapsed)}*/}
          {/*  disabled={!unref(getShowMenuRef)}*/}
          {/*/>*/}

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.menuSearch')}*/}
          {/*  event={HandlerEnum.HEADER_SEARCH}*/}
          {/*  def={unref(getShowSearch)}*/}
          {/*  disabled={!unref(getShowHeader)}*/}
          {/*/>*/}
          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.menuAccordion')}*/}
          {/*  event={HandlerEnum.MENU_ACCORDION}*/}
          {/*  def={unref(getAccordion)}*/}
          {/*  disabled={!unref(getShowMenuRef)}*/}
          {/*/>*/}

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.fixedHeader')}*/}
          {/*  event={HandlerEnum.HEADER_FIXED}*/}
          {/*  def={unref(getHeaderFixed)}*/}
          {/*  disabled={!unref(getShowHeader)}*/}
          {/*/>*/}
          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.fixedSideBar')}*/}
          {/*  event={HandlerEnum.MENU_FIXED}*/}
          {/*  def={unref(getMenuFixed)}*/}
          {/*  disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}*/}
          {/*/>*/}
          {/*<SelectItem*/}
          {/*  title={t('layout.setting.mixSidebarTrigger')}*/}
          {/*  event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}*/}
          {/*  def={unref(getMixSideTrigger)}*/}
          {/*  options={mixSidebarTriggerOptions}*/}
          {/*  disabled={!unref(getIsMixSidebar)}*/}
          {/*/>*/}
          <SelectItem title={t('layout.setting.tabsTheme')} event={HandlerEnum.TABS_THEME} def={unref(getTabsTheme)} options={tabsThemeOptions}/>
          <SelectItem title={t('layout.setting.topMenuLayout')} event={HandlerEnum.MENU_TOP_ALIGN} def={unref(getTopMenuAlign)} options={topMenuAlignOptions} disabled={!unref(getShowHeader) || unref(getSplit) || (!unref(getIsTopMenu) && !unref(getSplit)) || unref(getIsMixSidebar)}/>
          <SelectItem title={t('layout.setting.menuCollapseButton')} event={HandlerEnum.MENU_TRIGGER} def={triggerDef} options={triggerOptions} disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}/>
          <SelectItem title={t('layout.setting.contentMode')} event={HandlerEnum.CONTENT_MODE} def={unref(getContentMode)} options={contentModeOptions}/>
          <InputNumberItem title={t('layout.setting.autoScreenLock')} min={0} event={HandlerEnum.LOCK_TIME} defaultValue={unref(getLockTime)} formatter={(value) => {
                    return parseInt(value) === 0 ? `0(${t('layout.setting.notAutoScreenLock')})` : `${value}${t('layout.setting.minute')}`;
                }}/>
          <InputNumberItem title={t('layout.setting.expandedMenuWidth')} max={600} min={100} step={10} event={HandlerEnum.MENU_WIDTH} disabled={!unref(getShowMenuRef)} defaultValue={unref(getMenuWidth)} formatter={(value) => `${parseInt(value)}px`}/>
        </>);
        }
        function renderContent() {
            return (<>
          <SwitchItem title={t('layout.setting.menuDrag')} event={HandlerEnum.MENU_HAS_DRAG} def={unref(getCanDrag)} disabled={!unref(getShowMenuRef)}/>
          <SwitchItem title={t('layout.setting.collapseMenuDisplayName')} event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE} def={unref(getCollapsedShowTitle)} disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}/>
          <SwitchItem title={t('layout.setting.tabs')} event={HandlerEnum.TABS_SHOW} def={unref(getShowMultipleTab)}/>
          <SwitchItem title={t('layout.setting.breadcrumb')} event={HandlerEnum.SHOW_BREADCRUMB} def={unref(getShowBreadCrumb)} disabled={!unref(getShowHeader)}/>

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.breadcrumbIcon')}*/}
          {/*  event={HandlerEnum.SHOW_BREADCRUMB_ICON}*/}
          {/*  def={unref(getShowBreadCrumbIcon)}*/}
          {/*  disabled={!unref(getShowHeader)}*/}
          {/*/>*/}

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.tabsRedoBtn')}*/}
          {/*  event={HandlerEnum.TABS_SHOW_REDO}*/}
          {/*  def={unref(getShowRedo)}*/}
          {/*  disabled={!unref(getShowMultipleTab)}*/}
          {/*/>*/}

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.tabsQuickBtn')}*/}
          {/*  event={HandlerEnum.TABS_SHOW_QUICK}*/}
          {/*  def={unref(getShowQuick)}*/}
          {/*  disabled={!unref(getShowMultipleTab)}*/}
          {/*/>*/}
          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.tabsFoldBtn')}*/}
          {/*  event={HandlerEnum.TABS_SHOW_FOLD}*/}
          {/*  def={unref(getShowFold)}*/}
          {/*  disabled={!unref(getShowMultipleTab)}*/}
          {/*/>*/}

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.sidebar')}*/}
          {/*  event={HandlerEnum.MENU_SHOW_SIDEBAR}*/}
          {/*  def={unref(getShowMenu)}*/}
          {/*  disabled={unref(getIsHorizontal)}*/}
          {/*/>*/}

          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.header')}*/}
          {/*  event={HandlerEnum.HEADER_SHOW}*/}
          {/*  def={unref(getShowHeader)}*/}
          {/*/>*/}
          {/*<SwitchItem*/}
          {/*  title="Logo"*/}
          {/*  event={HandlerEnum.SHOW_LOGO}*/}
          {/*  def={unref(getShowLogo)}*/}
          {/*  disabled={unref(getIsMixSidebar)}*/}
          {/*/>*/}
          <SwitchItem title={t('layout.setting.footer')} event={HandlerEnum.SHOW_FOOTER} def={unref(getShowFooter)}/>
          {/*<SwitchItem*/}
          {/*  title={t('layout.setting.fullContent')}*/}
          {/*  event={HandlerEnum.FULL_CONTENT}*/}
          {/*  def={unref(getFullContent)}*/}
          {/*/>*/}

          <SwitchItem title={t('layout.setting.grayMode')} event={HandlerEnum.GRAY_MODE} def={unref(getGrayMode)}/>

          <SwitchItem title={t('layout.setting.colorWeak')} event={HandlerEnum.COLOR_WEAK} def={unref(getColorWeak)}/>
        </>);
        }
        function renderTransition() {
            return (<>
          <SwitchItem title={t('layout.setting.progress')} event={HandlerEnum.OPEN_PROGRESS} def={unref(getOpenNProgress)}/>
          <SwitchItem title={t('layout.setting.switchLoading')} event={HandlerEnum.OPEN_PAGE_LOADING} def={unref(getOpenPageLoading)}/>

          <SwitchItem title={t('layout.setting.switchAnimation')} event={HandlerEnum.OPEN_ROUTE_TRANSITION} def={unref(getEnableTransition)}/>

          <SelectItem title={t('layout.setting.animationType')} event={HandlerEnum.ROUTER_TRANSITION} def={unref(getBasicTransition)} options={routerTransitionOptions} disabled={!unref(getEnableTransition)}/>
        </>);
        }
        return () => (<BasicDrawer {...attrs} title={t('layout.setting.drawerTitle')} width={330} class="setting-drawer">
        {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
        {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto"/>}
        <Divider>{() => t('layout.setting.navMode')}</Divider>
        {renderSidebar()}
        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
        {renderMainTheme()}
        <Divider>{() => t('layout.setting.headerTheme')}</Divider>
        {renderHeaderTheme()}
        <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
        {renderSiderTheme()}
        <Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
        {renderFeatures()}
        {/*<Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>*/}
        {renderContent()}
        {/*<Divider>{() => t('layout.setting.animation')}</Divider>*/}
        {/*{renderTransition()}*/}
        <Divider />
        <SettingFooter />
      </BasicDrawer>);
    },
});
